<template>
	<view class="page">
		<cu-custom>
			<view class="cu-bar fixed"
				:style="{'height':customBarHeight + 'px','padding-top':statusBarHeight + 'px','background-color':themeConfig.primaryColor}">
				<view class="margin-left-sm text-white" @tap="tapScan()">
					<view class="cuIcon-scan" style="font-size: 45rpx;"></view>
				</view>
				<view class="search-form round flex justify-center align-center">
					<input type="text" confirm-type="search" @confirm="searchDevice" :value="searchName"
						@input="searchNameInputChange" placeholder="搜索设备名称/编号"
						placeholder-style="color: #ff0000;text-align:center;"
						style="padding-right:0rpx;text-align:center;" />
				</view>
				<view v-if="searchName != null && searchName.lenght != 0" class="text-white">
					<button class="cu-btn bg-gradual-green round margin-right-xs" @tap="searchDevice()">搜索</button>
				</view>
			</view>
		</cu-custom>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" :top="'180rpx'" :bottom="'200rpx'"
			:safearea="true" offset="10" style="position:relative;z-index:1;width:100%;">
				<view v-for="(item,index) in projectList" :key="index">
					<view class="padding-lr-xl padding-tb" @tap="goToManageDevice(item)">
						<view class="flex justify-between align-center text-black">
							<view class="text-df text-bold">{{item.name}}</view>
							<view>
								<text class="text-df text-bold">管理设备</text>
								<text class="cuIcon-right margin-left-sm"></text>
							</view>
						</view>
					</view>
					<view class="common-shadow margin-lr-xl padding bg-white">
						<view class="flex justify-between align-center text-black text-df">
							<view class="text-bold">直连设备</view>
							<view class="text-gray" @tap="changeShowDevice(index)">
								共{{item.deviceList.length}}个设备
								<text v-if="!item.isShowDevice" class="cuIcon-unfold margin-left-sm"></text>
								<text v-else class="cuIcon-fold margin-left-sm"></text>
							</view>
						</view>
						<view v-if="item.isShowDevice && item.deviceList.length !=0">
							<view v-for="(subItem,subIndex) in item.deviceList" :key="subIndex"
								class="flex justify-between align-center bg-white margin-top-xl"
								style="border-radius:15rpx;" @tap="deviceInfo(subItem)">
								<view class="flex justify-start align-center">
									<img style="width:80rpx;height:auto" src="../../../../assets/images/device.png"
										alt="" mode="widthFix">
									<view class="padding-left">
										<view class="text-df text-black text-bold text-title">{{subItem.deviceName}}
										</view>
										<view class="text-xs text-gray-color margin-top-xs">{{subItem.code}}</view>
										<view class="text-xs text-gray-color address-input">{{subItem.address}}</view>
									</view>
								</view>
								<view class="text-center">
									<view class="flex justify-start align-center">
										<signal :netSignal="subItem.signal" :inline="subItem.inline"></signal>
										<surplus id="surplus" :battery="subItem.battery" :inline="subItem.inline"
											class="surplus margin-left-sm"></surplus>
									</view>
									<view class="text-center margin-top-xs">
										<img v-if="subItem.inline === 1" style="width:50rpx;height:50rpx;"
											src="../../../../assets/images/onLineLamp.png" alt="" mode="widthFix">
										<img v-else style="width:50rpx;height:50rpx;"
											src="../../../../assets/images/offLamp.png" alt="" mode="widthFix">
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
		</mescroll-body>

		<view style="position:fixed;bottom:140rpx;right:50rpx;z-index:10000;" @tap="isShowAddModal = true">
			<view class="flex justify-center align-center bg-red-color round" style="width:10vw;height:10vw;">
				<text class="cuIcon-add text-white" style="font-size:45rpx;"></text>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="[isShowAddModal?'show':'']"
			style="text-align: start;z-index:10001;">
			<view class="cu-dialog bg-white">
				<view class="cu-bar bg-white">
					<view class="action text-bold">
						新增项目
					</view>
					<view class='action text-bold'>
						<view class="cuIcon-close text-grey" @tap="closeAddModal"></view>
					</view>
				</view>
				<form>
					<view class="cu-form-group solid-bottom">
						<view class="title">项目名</view>
						<input type="text" v-model="projectName" />
					</view>
					<button class="cu-btn bg-red block margin lg" @tap="bindProject">
						确认
					</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showModal,
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import * as storage from '@/util/storage'
	import * as ztIotApi from '@/api/dmIot/ztIotApi.ts'
	import Surplus from '@/components/ztn-custom/Surplus2'
	import Signal from '@/components/ztn-custom/Signal'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins';
	export default {
		name: 'ProjectList',
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			Surplus,
			Signal
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			},
		},
		props: {
			param: {
				type: [Number, String, Object],
				default () {
					return null;
				}
			},
		},
		data() {
			return {
				downOption: {
					use: true,
					auto: false, //是否在初始化后,自动执行downCallback; 默认true
					native: false
				},
				upOption: {
				    use: false
				},
				searchName: null,
				currentPage: 1,
				pageSize: 10,
				// projectList: [{
				// 	name: "测试",
				// 	deviceList: 0,
				// 	isShowDevice: true
				// }, {
				// 	name: "项目1",
				// 	deviceList: 2,
				// 	isShowDevice: true
				// }]
				projectList: [],
				isShowAddModal: false,
				projectName: "",
				customBarHeight: storage.getCustomBarHeight(),
				statusBarHeight: storage.getStatusBarHeight(),
				tabbarHeight: storage.getTabbarHeight(),
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.projectList = []
				this.getInsecticidalLampProjectList()
			},
			downCallback() {
				this.init()
				this.mescroll.endSuccess();
			},
			changeShowDevice(index) {
				let projectList = [...this.projectList]
				projectList[index].isShowDevice = !projectList[index].isShowDevice
				this.projectList = projectList
			},
			getInsecticidalLampProjectList() {
				let currentPage = this.currentPage
				let pageSize = this.pageSize
				let params = {
					pageNum: currentPage,
					pageSize
				}
				ztIotApi.getInsecticidalLampProjectList(params).then((res) => {
					const {
						msg,
						data,
						success
					} = res
					if (success) {
						let projectList = []
						for (var i = 0; i < data.length; i++) {
							let isShowDevice = i > 1 ? false : true
							let item = {
								...data[i],
								isShowDevice
							}
							projectList.push(item)
						}
						this.projectList = projectList
					}
				})
			},
			bindProject() {
				let projectName = this.projectName
				let params = {
					name: projectName
				}
				ztIotApi.addInsecticidalLampProject(params).then((res) => {
					const {
						msg,
						data,
						success
					} = res
					if (success) {
						showToast("操作成功", 'none', 1000, false) //操作成功
						this.closeAddModal()
						this.init()
					}
				})
			},
			closeAddModal() {
				this.projectName = ""
				this.isShowAddModal = false
			},
			goToManageDevice(item) {
				uni.navigateTo({
					url: `/pages/manageDevice/manageDevice?id=${item.id}&name=${item.name}`
				})
			},
			deviceInfo(item) {
				uni.navigateTo({
					url: `/pages/deviceInfo/deviceInfo?id=${item.id}&code=${item.code}`
				})
			},
			searchNameInputChange(e) {
				let searchName = e.detail.value.replace(/\s/g, '')
				this.searchName = searchName
			},
			searchDevice() {
				let searchName = this.searchName
				this.goToDeviceList(searchName)
			},
			goToDeviceList(param) {
				uni.$emit("navChange", "device", param)
			},
			tapScan() {
				uni.scanCode({
					success: (res) => {
						let result = res.result
						ztIotApi.bindingInsecticidalLampDevice({
							"bindingCode": result
						}).then((res) => {
							const {
								msg,
								data,
								success
							} = res
							if (success) {
								showToast("操作成功", 'none', 1000, false) //操作成功
								this.goToDeviceList()
							}
						})
					},
					fail: (res) => {
						showToast("操作失败", 'none', 1000, false) //操作失败
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.text-gray-color {
		color: #cdcdcd;
	}

	.bg-red-color {
		background-color: #ff0000;
	}

	.red-color {
		color: #ff0000;
	}
	
	.page {
		background-color: #f4f6ff;
		min-height: 100vh;
	}

	.common-shadow {
		box-shadow: 0upx 0upx 10upx 4upx rgba(0, 0, 0, 0.04);
		border-radius: 8px;
		border: 0.05px solid;
		border-color: #efefef;
	}
</style>
